<style type="text/css">
    .action-cell {
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
    }
</style>
<template>
    <div>
        <div class="action-cell">
            <Button type="error" @click="jumpPage(organizeId,'CheckerAdd')">添加该组织审核人</Button>
            <Button type="primary" @click="backGoJump()">返回</Button>

        </div>
        <!--<div class="action-cell">-->
        <!--</div>-->
        <Table :context="self" :data="tableData" :columns="tableColumns" stripe border></Table>
    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';

    export default {
        data() {
            return {
                self: this,
                tableData: [],
                total: 0,
                current: 1,
                //组织id
                organizeId:'',
                tableColumns: [
                    {
                        title: '审核人',
                        key: 'Personalname',
                        align: 'center',
                    },
                    // {
                    //     title: '头像',
                    //     key: 'headimgurl',
                    //     align: 'center',
                    //     render: (h, params) => {
                    //         return h('div', [
                    //             h('img', {
                    //                 attrs: {
                    //                     src: apiUtil.urls.baseUrl + params.row.headimgurl
                    //                 },
                    //                 style: {
                    //                     width: '80px',
                    //                 },
                    //                 on: {
                    //                     click: () => {
                    //                         this.preview(params.index);
                    //                     }
                    //                 }
                    //             }),
                    //         ])
                    //     }
                    // },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        // background: '#e4e4e4',
                                        // border: '1px solid #d5d5d5'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.row.Id)
                                        }
                                    }
                                }, '删除'),
                            ])
                        }
                    }
                ]
            }
        },
        mounted() {
            this.mockTableData();
            this.organizeId =this.$route.query.id;
        },
        methods: {
            //backJump
            backGoJump:function(){
                this.$router.back(-1)

            },
            //跳转
            jumpPage: function (id, url) {
                //跳转
                let route = '';
                if (id.length > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                }

                this.$router.push(route);
            },

            //图片预览
            preview(index) {
                console.log('进入tip预览__index',index);
                this.$imagePreview({
                    images: this.images,
                    index: index,
                })
            },
            mockTableData() {
                let that = this;

                let para = {
                   id:this.$route.query.id,
                };
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.OrgCheckers, para, function (res) {
                    that.$Loading.finish();
                    // that.total = res.Msg.TotalCount;
                    // that.current = res.Msg.CurrentPage;
                    that.tableData = res.Msg;

                    console.log('tableData:', res)
                });

            },
            remove(index) {
                let that = this;
                this.$Modal.confirm({
                    title: '用户信息',
                    content: `是否删除此该审核员吗`,
                    onOk: function () {
                        this.$Loading.start();
                        let para = {
                            peopleid: index,
                            orgId: that.$route.query.id,
                        };
                        let params = that.$qs.stringify(para);
                        apiUtil.post(that, apiUtil.urls.DelChecker, params, function (res) {
                            that.mockTableData();
                        });
                    }
                })
            },
            changePage(row) {
                // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
                console.log("row", row);
                this.current = row;
                this.mockTableData();
            },

        },
    }
</script>